<template>
	<view class="carousel-box">
		<!-- 左右箭头 -->
		<view class="carousel-nav-buttons" v-show="isEndsButton">
			<view class="carousel-nav-buttons-prev" @click="prevSlide">
				<slot name="prev-button">
					<view class="default-prev-button">←</view>
				</slot>
			</view>
			<view class="carousel-nav-buttons-next" @click="nextSlide">
				<slot name="next-button">
					<view class="default-next-button">→</view>
				</slot>
			</view>
		</view>

		<!-- 关键改动 1：key 强制重建 -->
		<swiper
			:key="carouselKey"
			:indicator-dots="indicatorDots"
			:autoplay="autoplay"
			:interval="interval"
			:duration="duration"
			:current="currentVal"
			:circular="circular"
			@change="onSwiperChange"
			class="swiper-box"
		>
			<swiper-item v-for="(item, index) in items" :key="index" class="carousel-item">
				<slot :name="'item-' + index" :item="item"></slot>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup lang="ts">
import { ref, watch, inject } from 'vue';

const props = defineProps({
	items: { type: Array, default: () => [] },
	indicatorDots: { type: Boolean, default: true },
	autoplay: { type: Boolean, default: true },
	interval: { type: Number, default: 5000 },
	duration: { type: Number, default: 400 },
	current: { type: Number, default: 0 },
	isEndsButton: { type: Boolean, default: false },
	circular: { type: Boolean, default: true }
});

const emit = defineEmits(['update:current', 'change']);
const config = inject<any>('config');

const currentVal = ref(props.current);
const carouselKey = ref(0); // 关键改动 2：刷新 key

/* 双向绑定 current */
watch(
	() => props.current,
	(v) => (currentVal.value = v),
	{ immediate: true }
);
watch(currentVal, (v) => emit('update:current', v));

/* 关键改动 3：节流防止抽搐 */
let changing = false;
const onSwiperChange = (e: any) => {
	if (changing) return;
	changing = true;
	const { current } = e.detail;
	currentVal.value = current;
	emit('change', current);
	setTimeout(() => (changing = false), 150);
};

/* 手动切换 */
const prevSlide = () => {
	const len = props.items.length;
	currentVal.value = currentVal.value <= 0 ? len - 1 : currentVal.value - 1;
	emit('change', currentVal.value);
};
const nextSlide = () => {
	const len = props.items.length;
	currentVal.value = currentVal.value >= len - 1 ? 0 : currentVal.value + 1;
	emit('change', currentVal.value);
};
</script>

<style lang="scss" scoped>
.carousel-box {
	width: 100%;
	/* 关键改动 4：禁止百分比高度，用固定值 */
	height: 560rpx;
	position: relative;
}

.carousel-nav-buttons {
	position: absolute;
	width: 90%;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	padding: 0 10rpx;
	z-index: 10;
}

.carousel-nav-buttons-prev,
.carousel-nav-buttons-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	user-select: none;
}

.default-prev-button,
.default-next-button {
	font-size: v-bind('config.fontSize.largeText');
	color: v-bind('config.fontColor.mainText');
}

.swiper-box {
	width: 100%;
	height: 100%;
}

.carousel-item {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
